<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>王者荣耀英雄信息</title>
<link rel="shortcut icon" href="http://www.menbin.top:8080/static/img/favicon.ico"/>    
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
</head>
<body>
<div class="container">
<h2 >王者荣耀英雄推荐铭文</h2>
<br>
<p><a href='http://127.0.0.1:8888' >回首页</a></p>
<br>
<form action="" method="post" onSubmit="return ajaxForm()" accept-charset="UTF-8">  
英 雄&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input  name='hero' value = '' />
<input  type="submit" value = "查询"/>
</form>	
<br>
<p style="color:red;" id="name1"></p>
<br>
<table class="table"  id='tabletest'>
    <thead>
    <tr>
        <th>英雄人物</th>
		<th>铭文图案</th>
		<th>铭文名称+描述</th>
		<th>tips</th>
		</tr>
	</thead>
	<tbody>
		<tr>
        <td></td>
        <td></td>
		</tr>
    </tbody>
</table>
<hr>
</div>
</body>
<script type=text/javascript src="{{  
		url_for('static', filename='jquery-3.1.1.js') }}"></script>  
        <script type="text/javascript">  
            var $SCRIPT_ROOT = {{request.script_root|tojson|safe}};		
            function ajaxForm() {  
                $.ajax( {  
                    type : "POST",  
                    url : $SCRIPT_ROOT,  
                    dataType : "json", 
					data : {  
						"flag" :   $("input[name=hero]").val(),
                    },  
                    error: function( XMLResponse ) {  
                        alert( XMLResponse.responseText )  
                    },  
					success: function(data) {
						var item;
						var head;
						head = '<thead><tr><th>英雄人物</th><th>铭文图案</th><th>铭文名称+描述</th><th>tips</th></tr></thead><tbody>';
						$('.table').text('');
						$('.table').append(head);
						$.each(data.data, function(i, result) {
							item = "<tr><td>" + result['hero'] + "</td><td>" + result['pic'] + "</td><td>" + result['desc'] + "</td><td>" + result['tips'] + "</td><td>"  ;
							$('.table').append(item);
						})
						;
						$('.table').append('</tbody>');	
						$("#name1").text(data.name);						
					} 
				});  
                return false;              
            }
</script>
</html>